<div class="about-3">
  <div class="page-width">
     <div class="ten-title">
        <h2 class="title">
          <span>{{ section.settings.title | escape }}</span>
        </h2>
       <div class="contact-content font-contact">
          {%- if section.settings.richtext != blank -%}
          {{ section.settings.richtext }}
       {% endif %}
       </div>
     </div>
     <div class="ten-content">
      <div class="flex about_flex">
        {%- for block in section.blocks -%}
            <div class="customers-list swiper-slide" {{ block.shopify_attributes }} data-swiper-parallax="-300">   
              <a{% if section.settings.button_link != blank %} target="_blank" href="{{ section.settings.button_link }}"{% endif %} class=""{% if section.settings.button_link == blank %} aria-disabled="true"{% endif %}>     
              {%- if block.settings.image != blank -%}
              <div class="card__image-wrapper">
                <div class="deferred-media__poster media">
                    <img srcset=" 
                    {%- if block.settings.image.width >= 375 -%}{{ block.settings.image | img_url: '375x' }} 375w,{%- endif -%}
                        {%- if block.settings.image.width >= 470 -%}{{ block.settings.image | img_url: '470x' }} 470w,{%- endif -%}
                        {%- if block.settings.image.width >= 640 -%}{{ block.settings.image | img_url: '640x' }} 640w,{%- endif -%}
                        {%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
                        {%- if block.settings.image.width >= 950 -%}{{ block.settings.image | img_url: '950x' }} 950w,{%- endif -%}
                        {%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | img_url: '1420x' }} 1420w,{%- endif -%}
                      {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                      src="{{ block.settings.image | img_url: '500x' }}" 
                      sizes="(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %},
                        (min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},
                      calc(100vw - 30px)" alt="{{ block.settings.image.alt }}"
                        height="{{ block.settings.image.height }}" width="{{ block.settings.image.width }}"
                        loading="lazy"
                        >
                </div>
                <div class="bg">
                  {% render "icon-ins" %}
                </div>
              </div>
            {%- endif -%}
            </a>
            </div>
         {%- endfor -%}
      </div>
  </div>
</div>

{% schema %}
{
"name": "About 3",
"tag": "section",
 "class": "multicolumn-about",
"settings": [
{
  "type": "text",
  "id": "title",
  "default": "Multicolumn",
  "label": "t:sections.multicolumn.settings.title.label"
},
{
  "type": "richtext",
  "id": "richtext",
  "label": "Content"
 },
{
  "type": "url",
  "id": "button_link",
  "label": "Button link"
}
],
"blocks": [
{
  "type": "image",
  "name": "image",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "image"
    }
  ]
}
],
"presets": [
  {
    "name": "About 3"
  }
]
}
{% endschema %}